<template>
  <div class="flex all flex flex-end">
    <div class="text atBottom">共计:</div>
<!--    <div class="bold howMuch atBottom">{{this.$store.getters.howMuch}}</div>-->
    <div class="bold howMuch atBottom">{{this.$store.getters.howMuch}}</div>
    <div class="calculate atBottom" @click="calculate">结算</div>
  </div>
</template>

<script>
export default {
  name: "carCalculate",
  data(){
    return{
      aaa:this.calculateHowMuch()
    }
  },
  methods: {
    calculateHowMuch(){
      var sum=0;
      for(let i in this.$store.state.carCount){
        sum+=this.$store.state.carCount[i]*this.$store.state.car[i].price;
      }
      return sum;
    },
    calculate() {
      if(this.$store.state.car.length===0) {
        if(confirm("结算失败:购物车为空，是否进入首页浏览商品？")){
          this.$router.replace("/home")
        }
      }
      else console.log("结算成功:￥" + this.$store.getters.howMuch);
      // console.log("结算成功:"+this.calculateHowMuch().toString()+"元")
    },

  }
}
</script>

<style scoped>
.howMuch::before{
  content: "￥";
  color: #FF4400;
  font-size: 1rem;
}
.all{
  position: fixed;
  bottom: 4.5rem;
  right: 0;
  left: 0;
  background-color: #F4F4F4;
}
.all .text{
  margin-right: 1rem;
}
.atBottom{
  margin: auto 0 0 0;
}
.howMuch{
  color: #FF4400;
  font-size: 1.5rem;
  margin-right: 1rem;
}
.calculate{
  padding: .5rem 1rem;
  color: #fff;
  background-color: #FF4400;
  border-radius: .5rem;
}
</style>